<template>
  <div class="home">
    <div class="homeHead">
      <div class="homesearch">
        <input type="text" placeholder="请输入商品的名称" />
      </div>
      <swiper class="homeColor" ref="mySwiper" :options="swiperOptions">
        <swiper-slide><img src="./img/banner.jpg" /></swiper-slide>
        <swiper-slide><img src="../profile/image/my00.jpg" /></swiper-slide>
        <swiper-slide> <img src="./img/banner.jpg" /></swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
    <div class="homeContent">
      <ul>
        <li>
          <a href="">
            <img src="./img/typeicon1.png" />
            <p>今日特惠</p>
          </a>
        </li>
        <li>
          <a href="">
            <img src="./img/typeicon2.png" />
            <p>今日特惠</p>
          </a>
        </li>
        <li>
          <a href="">
            <img src="./img/typeicon3.png" />
            <p>今日特惠</p>
          </a>
        </li>
        <li>
          <a href="">
            <img src="./img/typeicon4.png" />
            <p>今日特惠</p>
          </a>
        </li>
        <li>
          <a href="">
            <img src="./img/typeicon5.png" />
            <p>今日特惠</p>
          </a>
        </li>
        <li>
          <a href="">
            <img src="./img/typeicon6.png" />
            <p>今日特惠</p>
          </a>
        </li>
        <li>
          <a href="">
            <img src="./img/typeicon6.png" />
            <p>今日特惠</p>
          </a>
        </li>
        <li>
          <a href="">
            <img src="./img/typeicon6.png" />
            <p>今日特惠</p>
          </a>
        </li>
      </ul>
    </div>
    <div class="homeCall">
      <img src="./img/hotit.png" />
      <p>商城开业狂欢！四重大礼等你来抢！</p>
    </div>
    <div class="homeNav">
      <div class="buyBox">
        <p><span>限时</span>抢购</p>
        <a href="" class="btn"></a>
        <a href="" class="btn1">全场一折起</a>
      </div>
      <ul>
        <li>
          <a href="">
            <img src="./img/23.png" />
            <p>超值优惠商品</p>
          </a>
        </li>
        <li>
          <a href="">
            <img src="./img/23.png" />
            <p>超值优惠商品</p>
          </a>
        </li>
        <li>
          <a href="">
            <img src="./img/23.png" />
            <p>超值优惠商品</p>
          </a>
        </li>
        <li>
          <a href="">
            <img src="./img/23.png" />
            <p>超值优惠商品</p>
          </a>
        </li>
      </ul>
    </div>
    <div class="homeAd">
      <img src="./img/ad.jpg" />
    </div>
    <div class="homehost">
      <div class="homehost1"></div>
      <div class="homehost2"></div>
      <div class="homehost3"></div>
    </div>
    <div class="homehost">
      <div class="homehost4"></div>
      <div class="homehost5"></div>
      <div class="homehost6"></div>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
export default {
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination',
        },
        autoplay: true,
      },
    }
  },
  components: {
    Swiper,
    SwiperSlide,
  },
  directives: {
    swiper: directive,
  },
}
</script>

<style scoped lang="stylus">
.home {
  background: #f7f7f7;
  height: 985px;

  .homeHead {
    width: 100%;
    margin: 0 auto;

    .homesearch {
      width: 100%;
      height: 32px;
      margin: 0 auto;
      position: absolute;
      z-index: 99;

      input {
        margin: 10px 0 0 10px;
        width: 94%;
        height: 30px;
        line-height: 30px;
        border: none;
        background: #fff;
        border-radius: 5px 0 0 5px;
        font-size: 13px;
        color: #999;
        float: left;
        outline: none;
        background-image: url('./img/s.png');
        background-repeat: no-repeat;
        background-size: 33px 32px;
        background-position: 340px -1px;
      }
    }
  }

  .homeColor {
    width: 100%;
    height: 197px;
    position: relative;
    top: 0;
    left: 0;

    img {
      width: 100%;
      height: 197px;
    }
  }

  .homeContent {
    ul {
      overflow: hidden;
      padding-bottom: 16px;

      li {
        width: 97px;
        height: 85px;
        margin-top: 11px;
        text-align: center;
        float: left;

        img {
          width: 54px;
          height: 54px;
          margin: 5px 22px;
        }

        p {
          font-size: 13px;
          color: #666;
        }
      }
    }
  }

  .homeCall {
    width: 100%;
    height: 57px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    overflow: hidden;
    text-align: center;
    margin-bottom: 7px;

    img {
      width: 112px;
      height: 32px;
      margin: 13px 0 13px 0;
    }

    p {
      width: 208px;
      height: 32px;
      line-height: 32px;
      font-size: 13px;
      color: #666;
      float: right;
      margin: 12px 55px 12px 0;
    }
  }

  .homeNav {
    width: 100%;
    overflow: hidden;

    .buyBox {
      padding: 8px;
      overflow: hidden;
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;

      p {
        display: inline-block;
        width: 56px;
        height: 29px;
        line-height: 29px;
        font-size: 14px;
        color: #333333;

        span {
          color: #FF2150;
        }
      }

      .btn1 {
        border: 1px #FF2150 solid;
        border-radius: 5px;
        float: right;
        width: 72px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        font-size: 12px;
      }

      .btn {
        float: right;
        width: 16px;
        height: 24px;
        background-image: url('./img/more.png');
      }
    }

    ul {
      overflow: hidden;
      width: 100%;
      border-bottom: 1px solid #eee;

      li {
        float: left;
        width: 25%;
        height: 105px;
        text-align: center;
        padding: 8px 0;
        border-right: 1px solid #eee;
        box-sizing: border-box;

        a {
          display: block;

          img {
            width: 77px;
            height: 72px;
          }

          p {
            height: 16px;
            font-size: 12px;
            color: #666666;
            line-height: 16px;
          }
        }
      }
    }
  }

  .homeAd {
    padding: 7px 0;

    img {
      width: 100%;
      height: 79px;
    }
  }

  .homehost {
    width: 100%;
    height: 112px;

    .homehost1 {
      width: 195px;
      height: 112px;
      background-image: url('./img/1.png');
      background-size: 195px 112px;
      background-position: center center;
      background-repeat: no-repeat;
      border: 1px solid #eee;
      box-sizing: border-box;
      display: inline-block;
    }

    .homehost2 {
      display: inline-block;
      width: 97px;
      height: 112px;
      background-image: url('./img/2.png');
      background-size: 97px 112px;
      background-position: center center;
      background-repeat: no-repeat;
      border: 1px solid #eee;
      box-sizing: border-box;
    }

    .homehost3 {
      display: inline-block;
      width: 98px;
      height: 112px;
      background-image: url('./img/3.png');
      background-size: 98px 112px;
      background-position: center center;
      background-repeat: no-repeat;
      border: 1px solid #eee;
      box-sizing: border-box;
    }

    .homehost4 {
      display: inline-block;
      width: 195px;
      height: 112px;
      background-image: url('./img/4.png');
      background-size: 195px 112px;
      background-position: center center;
      background-repeat: no-repeat;
      border: 1px solid #eee;
      box-sizing: border-box;
    }

    .homehost5 {
      display: inline-block;
      width: 97px;
      height: 112px;
      background-image: url('./img/5.png');
      background-size: 97px 112px;
      background-position: center center;
      background-repeat: no-repeat;
      border: 1px solid #eee;
      box-sizing: border-box;
    }

    .homehost6 {
      display: inline-block;
      width: 98px;
      height: 112px;
      background-image: url('./img/6.png');
      background-size: 98px 112px;
      background-position: center center;
      background-repeat: no-repeat;
      border: 1px solid #eee;
      box-sizing: border-box;
    }
  }
}
</style>
